@font-face {
  font-family: 'BBB Baskervvol';
  src: url('Fonts/BBBBaskervvol-Base.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 70px; /* adjust to your header's height */
  font-family: 'BBB Baskervvol', serif;
  color: #333;
  background-color: #f3efef81;
  line-height: 1.6;
  width: 100%;
}

.container {
  max-width: min(90%, 2000px);
  margin: 0 auto;
  width: 100%;
  padding-left: clamp(1rem, 2.6vw, 2.6cm);
  padding-right: clamp(1rem, 2.6vw, 2.6cm);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent; /* transparent so you see what's behind */
  z-index: 1000;
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-left: clamp(1rem, 2.6vw, 2.6cm);
  padding-right: clamp(1rem, 2.6vw, 2.6cm);
}

header img {
  height: 67px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

nav a {
  text-decoration: none;
  color:black;
  font-weight: normal;
  font-size: 1.2rem;
}

nav a.active {
  font-weight: bold;
}

footer {
  text-align: center;
  font-size: 1.1rem;
  font-style: italic;
}

footer p {
  color: #302e2e;
}

/* Intro page */
.intro-page {
  background:rgba(94, 85, 85, 0.24);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* place premier enfant en haut, dernier en bas */
  padding: 1rem;
  cursor: pointer;
}

/* Ligne du haut */

.intro-footer {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  align-self: center; /* place le mail à gauche */
}

.intro-logo {
  align-self: center; /* place le logo à droite */
}

/* Logo plus grand, aligné à droite */
.intro-logo img {
  max-width: 500px; /* ou ajuste selon la taille que tu veux */
  height: auto;
}

/* Page actualités avec fond semi-transparent */
.actualites-page {
  background:#f3efef81;
  min-height: 100vh;
  position: relative;
}

.actualites-page::before {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: #f3efef81;
  z-index: -1;
}

/* Galerie index */
.gallery {
  column-count: 3;
  column-gap: 1rem;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-item .overlay {
  position: absolute;
  top: 1rem;      /* petit décalage du bord haut */
  left: 1.5rem;     /* petit décalage du bord gauche */
  color: rgb(228, 14, 32);     /* texte en noir */
  font-size: 1.3rem;
  opacity: 0;       /* invisible par défaut */
  transition: opacity 0.3s ease;
  font-weight: bold;  /* optionnel : plus éditorial */
  padding: 0.2rem 0.4rem; /* petit padding */
  border-radius: 4px;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.collectif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* même espace horizontal et vertical que la gallery */
}

/* Image qui prend les colonnes 1 et 2 */
.image-item {
  grid-column: 1 / span 2;  /* occupe deux colonnes */
}

.image-item img {
  width: 100%;
  height: 100%;        /* prend toute la hauteur dispo */
  object-fit: cover;   /* recadre l’image sans déformer */
  display: block;
}

/* Texte dans la 3ème colonne */
.text-item {
  grid-column: 3; /* place d²ans la 3ème colonne */
}

.text-item p {
  text-align: left;
  font-size: 1rem;
  line-height: 1.2;

}

.actualites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* même que .gallery pour alignement */
}

/* Optionnel : style du texte */
.actualites-grid h2 {
  font-size: 1.2rem;
  margin-bottom: 0.1rem;
  font-style: italic;       /* italique */
}

/* Sous-titres */
.actualites-grid h3 {
  font-size: 1rem;       /* plus petit que le texte */
  font-style: italic;       /* italique */
  color: #464141;              /* gris clair */
  margin-top: 0.1rem;       /* grand espace au-dessus */
  margin-bottom: 0.8rem;    /* petit espace dessous */
}

.actualites-grid p {
  margin-bottom: 1rem; /* espace sous chaque paragraphe */
  text-align: left;
}

.monstre-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* espace entre colonnes */
  margin-bottom: 2.5rem;
  align-items: start; /* par défaut les items commencent en haut */
}

/* Image à gauche (2 colonnes) */
.monstre-image-left {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.monstre-image-left img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Image à droite (2 colonnes) */
.monstre-image-right {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.monstre-image-right img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Texte à droite de l'image gauche : aligné au bas */
.monstre-texte-right {
  grid-column: 3;
  grid-row: 1;
  align-self: end; /* aligne le texte au bas de la ligne de la grille */
  text-align: left;
}

/* Texte à droite de l'image gauche : aligné au bas */
.monstre-texte-rgt {
  grid-column: 3;
  grid-row: 1;
  align-self: start; /* aligne le texte au bas de la ligne de la grille */
  text-align: left;
}

/* Texte à gauche de l'image droite : aligné au haut */
.monstre-texte-left {
  grid-column: 1;
  grid-row: 2;
  align-self: start; /* déjà start par défaut, mais on le précise */
  text-align: left;
}

.monstre-texte-lft {
  grid-column: 1;
  grid-row: 2;
  align-self: end; /* déjà start par défaut, mais on le précise */
  text-align: left;
}

/* Styles communs au texte */
.monstre-texte p {
  font-size: 1rem;
  line-height: 1.4;
}

.monstre-texte h2 {
  font-size: 1.2rem;
  font-weight: bold;
}

.enquete-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* espace entre colonnes */
  margin-bottom: 2.5rem;
  align-items: start; /* par défaut les items commencent en haut */
}

/* Texte en haut à gauche */
.enquete-texte {
  grid-column: 1;  /* colonne 1 */
  grid-row: 2;     /* deuxième ligne */
  align-self: end; /* colle en bas de sa cellule */
}

/* Image 1 occupe deux colonnes à droite */
.enquete-image1 {
  grid-column: 2 / span 2; /* colonnes 2 et 3 */
  grid-row: 1 / span 2;    /* s'étend sur les lignes 1 et 2 */
}

/* Image 3 prend toute la largeur */
.enquete-image3 {
  grid-column: 1 / span 3; /* toutes les colonnes */
  grid-row: 3;             /* troisième ligne */
}

/* Image 3 prend toute la largeur */
.enquete-image4 {
  grid-column: 1 / span 3; /* toutes les colonnes */
  grid-row: 4;             /* troisième ligne */
}

/* Styles communs aux images */
.enquete-layout img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* utile si tu fixes une hauteur */
}

.navigation-arrows {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* flèche gauche à gauche, flèche droite à droite */
  position: relative;

}

/* Flèche gauche : en haut à gauche */
.arrow-left {
  align-self: flex-start; /* gauche */
  font-size: 2rem;
  text-decoration: none;
  color: #333;
  margin: 1rem; /* petit espace par rapport au bord */
  margin-bottom: 0.5rem;
}

.arrow-left:hover {
  color: #000;
}

/* Flèche droite : en bas à droite */
.arrow-right {
  align-self: flex-end; /* droite */
  font-size: 2rem;
  text-decoration: none;
  color: #333;
  margin: 1rem; /* petit espace par rapport au bord */
  margin-top: -1.5rem;
}

.arrow-right:hover {
  color: #000;
}

.lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(39, 37, 37, 0.8); /* fond noir transparent */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox:target {
  display: flex; /* devient visible quand ciblé */
}

.lightbox img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  border-radius: 8px;
}

/* Zone clic "fermer" */
.lightbox .close {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.ligne {
  width: 100%;           /* largeur de la ligne */
  height: 2px;           /* épaisseur */
  background-color: #a09e9e; /* couleur */
  margin: 1.5rem 0;      /* espace au-dessus et en dessous */
}


@media (min-width: 900px) and (max-width: 1024px) {
  .monstre-layout {
    grid-template-columns: 1fr; /* une seule colonne */
    grid-auto-rows: auto;       /* hauteur automatique selon le contenu */
  }

  .monstre-image-left,
  .monstre-image-right,
  .monstre-texte-left,
  .monstre-texte-right {
    grid-column: 1 / -1; /* occupe toute la colonne */
    grid-row: auto;       /* ligne automatique, pas de superposition */
    align-self: start;    /* alignement en haut */
    margin-bottom: 1.5rem; /* espace entre les blocs */
  }

  .monstre-image-left img,
  .monstre-image-right img {
    width: 100%;           /* pleine largeur */
    height: auto;          /* pour garder les proportions */
  }

  .actualites-grid {
    grid-template-columns: 1fr; /* une seule colonne */
  }

  .collectif-grid {
    grid-template-columns: 1fr; /* une seule colonne */
  }

  .image-item {
    grid-column: 1; /* remet l’image dans la première colonne */
  }

  .text-item {
    grid-column: 1; /* remet le texte en dessous de l’image */
  }

  .gallery {
    column-count: 2;
  }
}


/* Responsive mobile — moins de 768px */
@media (max-width: 900px) {

  /* Container général */
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Header */
  header .container {
    flex-direction: column;
    align-items: center;
  }

  header img {
    margin-bottom: 0.5rem;
  }

  /* Navigation */
  nav {
    width: 100%;
  }

  nav ul {
    display: flex;         /* garde le flex */
    flex-wrap: wrap;       /* permet aux liens de passer à la ligne si besoin */
    justify-content: center;
    gap: 0.2rem;           /* espace réduit pour mobile */
    width: 100%;
  }

  nav a {
    font-size: clamp(0.8rem, 3vw, 1.1rem); /* taille adaptative selon l'écran */
    text-align: center;
    padding: 0.3rem 0.5rem;  /* ajoute un peu de clicabilité */
    display: inline-block;    /* important pour le wrapping */
  }

  nav a.active {
    font-weight: bold;
  }

  /* Galeries et grilles */
  .gallery {
    padding-top: 4rem;
    column-count: 1;
  }

  .collectif-grid,
  .actualites-grid,
  .monstre-layout,
  .enquete-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .monstre-image-left,
  .monstre-image-right,
  .enquete-image1,
  .enquete-image2,
  .enquete-image3,
  .enquete-image4 {
    grid-column: 1;
    grid-row: auto;
  }

  .monstre-texte-left,
  .monstre-texte-right,
  .monstre-texte-lft,
  .monstre-texte-rgt,
  .enquete-texte,
  .text-item {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 1rem;
  }

  .actualites-grid,
  .collectif-grid {
    padding-top: 4rem;
  }

  .gallery-item .overlay {
    font-size: 1rem;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .lightbox img {
    max-width: 90%;
    max-height: 80%;
  }

  /* Titres et textes */
  h1, h2, h3 {
    font-size: 0.8rem;
  }

  p {
    font-size: 0.7rem;
  }

  footer p {
    font-size: 0.6rem;
  }

  .intro-logo img {
    max-width: 200px;
    height: auto;
  }
}